<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div v-for="buy,i in cart">

        <!-- 绑定复选框的值为商品的 sel 属性 -->
        <input type="checkbox" name="" id="" v-model="buy.sel">

        <img :src="buy.pic" width="200px" height="100px" alt="">

        <span>{{buy.genme}}   {{buy.price}}元</span>

        <!-- 买多少个 -->
        <!-- 绑定数字输入框的值为商品的 n 属性 -->
        <!-- 添加点击事件，增加或减少商品数量 -->
        <input type="number"  v-model="buy.n" min="1">
        <button @click="buy.n++">+</button>
        <button @click="buy.n--">-</button>

        <!-- 添加删除按钮，点击时从购物车中移除商品 -->
        <button @click="remove(i)">删除</button>
       </div>
       <!-- 使用计算属性显示合计金额 -->
       <div>合计: {{total}}元</div>
    </div>
    <script src="/js/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            
            data: {
               cart:[
                {genme:"手机",price:20,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',},
                {genme:"电脑",price:30,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',},
                {genme:"手表",price:40,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',}
               ],

            },
            methods: {
                // 定义一个方法，根据索引从购物车中移除商品
                remove(index) {
                    this.cart.splice(index, 1);
                }
            },
            computed: {
                // 定义一个计算属性，根据商品的数量和价格计算合计金额
                total() {
                    let sum = 0;
                    // 遍历购物车中的商品
                    for (let buy of this.cart) {
                        // 只计算选中的商品
                        if (buy.sel) {
                            // 累加商品的数量乘以价格
                            sum += buy.n * buy.price;
                        }
                    }
                    // 返回合计金额
                    return sum;
                }
            }
        })
    </script>
</body>
</html>
